<template lang="html">
  <div class="index">
    <div class="top">
      <h2 class="same-h2"><span>区域案例</span></h2>
      <ul>
        <li class="index" v-for="(item,index) in banners" :key="index" @click="toList(item.text)">
          <img :src="item.imgUrl">
          <span>{{item.label}}</span>
        </li>
      </ul>
    </div>
     <div class="bottom">
      <h2 class="same-h2"><span>现场案例</span></h2>
      <!--<div class="img-container">
          <div class="player" id="hooloplayer">
          <div id="playerDrag">
            <object type="application/x-shockwave-flash" data="http://player.hoge.cn/player.swf" width="640px" height="515px" id="m2o_vodplayer" style="visibility: visible;">
              <param name="IsContinue" value="1">
              <param name="allowFullScreen" value="true">
              <param name="bgcolor" value="#000">
              <param name="allowscriptaccess" value="always">
              <param name="flashvars" value="width=600px&amp;height=515px&amp;video=51449&amp;sideBarType=1&amp;config=46vod.xml&amp;autoPlay=true">
            </object>
            <input type="hidden" name="mcid" id="mcid" value="77692">
          </div>
          <input type="hidden" value="http://nvod.hoolo.tv/2014/1400/5143/0089/140051430089.ssm/140051430089.m3u8">
        </div>
      </div>-->
        <ul>
           <li class="index2" v-for="(list,index2) in cases" :key="index2">
              <img :src="list.imgUrl"/>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [ {
        imgUrl: require('./images/UptownVillage.png'),
        label: '上城区',
        text: 'case-shangcheng'
      }, {
        imgUrl: require('./images/downtown.png'),
        label: '下城区',
        text: 'case-xiacheng'
      }, {
        imgUrl: require('./images/jianggan.png'),
        label: '江干区',
        text: 'case-jiangggan'
      }, {
        imgUrl: require('./images/xiaoshan.png'),
        label: '萧山区',
        text: 'case-xiaoshan'
      }, {
        imgUrl: require('./images/yuhang.png'),
        label: '余杭区',
        text: 'case-yuhang'
      }, {
        imgUrl: require('./images/xihu.png'),
        label: '西湖区',
        text: 'case-xihu'
      }, {
        imgUrl: require('./images/binjiang.png'),
        label: '滨江区',
        text: 'case-bingjiang'
      }, {
        imgUrl: require('./images/gonshu.png'),
        label: '拱墅区',
        text: 'case-gongshu'
      }, {
        imgUrl: require('./images/fuyang.png'),
        label: '富阳区',
        text: 'case-fuyang'
      }, {
        imgUrl: require('./images/linan.png'),
        label: '宁波市',
        text: 'case-linan'
      } ],
      cases: [ {
        imgUrl: require('./images/case1.png')
      }, {
        imgUrl: require('./images/case2.png')
      }, {
        imgUrl: require('./images/case3.png')
      }, {
        imgUrl: require('./images/case4.png')
      }, {
        imgUrl: require('./images/case5.png')
      }, {
        imgUrl: require('./images/case6.png')
      }, {
        imgUrl: require('./images/case7.png')
      }, {
        imgUrl: require('./images/case8.png')
      }, {
        imgUrl: require('./images/case9.png')
      }, {
        imgUrl: require('./images/case10.png')
      } ]
    }
  },
  methods: {
    toList(zone) {
      this.$router.push('case-show-after/' + zone)
    }
  }
}
</script>

<style lang="css">
</style>
